<template>
  <q-page class="q-pa-md">
    <div style="position: relative;">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
        <el-icon style="cursor: pointer;" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="实验" />
      </q-breadcrumbs>
    </div>
    <el-button class="refreshBtn" plain @click="getExperimentsOperators" v-if="tabsName == 'steps'"
      :loading="loading">刷新</el-button>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="设计画布" name="designerCanvas">
        <iframe v-if="activeName == 'designerCanvas'" id="iframe" ref="iframe" :src="iframeSrc" width="100%"
          frameborder="0" scrolling="no" :class="{ 'hide': activeName !== 'flow' }" />
      </el-tab-pane>
      <el-tab-pane label="训练步骤" name="steps">
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="ID" width="180" />
          <el-table-column prop="operator_label" label="算子名称" width="180" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="operatorRunState(scope.row.status)" class="mx-1" effect="plain" round>
                {{ stateText(operatorRunState(scope.row.status)) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" />
          <el-table-column prop="start_time" label="开始时间" />
          <el-table-column prop="finish_time" label="结束时间" />
          <el-table-column align="center" prop="labels" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small"
                @click="showLog(scope.row.id, scope.row.workflow_instance_id)">日志</el-button>
              <el-button link type="primary" size="small" v-if="scope.row.status == 'success'"
                @click="runResult(scope.row.configs, scope.row.status)">运行结果</el-button>
              <el-button v-if="scope.row.has_model" link type="primary" size="small"
                @click="toCreateModel(scope.row.id)">模型注册</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div></div>
    <!-- 算子日志 -->
    <div :class="operatorState ? 'popupBox showLog' : 'popupBox'">
      <div class="logContent">
        <div class="row justify-between">
          <div class="title">{{ operatorTitle }}</div>
          <div class="colseBtn" @click="operatorState = false">
            <el-icon>
              <Close />
            </el-icon>
          </div>
        </div>
        <div class="logBox">
          <operator-log v-show="operatorLogState" ref="operatorLogRef" />
          <operation-result v-show="operatorResultState" ref="operationResultRef" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { experimentsOperators } from 'src/api/designerTool'
import { designerStore } from 'src/stores/designerTool/designerTool'
import { modelStore } from 'src/stores/model';
import { operatorRunState,stateText } from 'src/utils/designerTool/toole'
import OperatorLog from './canvas/RightProperty/operatorLog.vue'
import OperationResult from './canvas/RightProperty/operationResult.vue'
// import boxLoading from 'src/components/boxLoading.vue';
const router = useRouter()
const store = designerStore()
const projectId = router.currentRoute.value.params.project_id
const loading = ref(false)
const iframeSrc = ref('')
const pageData = ref({
  page: 1
})
const experimentData = ref({
  results: <any>[]
})
const operatorState = ref(false)
const operatorLogState = ref(false)
const operatorLogRef = ref<any>()
const operatorResultState = ref(false)
const operationResultRef = ref<any>()
const operatorTitle = ref('')
const tableData = ref(<any>[])
const tabsName = ref('')
watch(operatorState, (newEl, oldEl) => {
  if (newEl == false) {
    operatorInit()
  }
})
watch(() => store.workflowWebsocketDag, (newData, oldData) => {
  getExperimentsOperators()
})
onMounted(() => {
  store.LEFT_TABS_STATE(false)
  iframeSrc.value = `/v2/canvas-index`
})
const activeName = ref('designerCanvas')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  tabsName.value = tab.props.name
  if (tab.props.name == 'steps') {
    getExperimentsOperators()
  }
}
function getExperimentsOperators() {
  loading.value = true
  experimentsOperators(projectId, store.experiments_id.workflow_id, store.experiments_id.id).then(res => {
    tableData.value = res.data
    loading.value = false
  }).catch(error => {
    loading.value = false
  })
}
function toCreateModel(operator_id: number) {
  modelStore().setModelOperator(operator_id)
  router.push({ name: 'model-app', params: { project_id: projectId } });
}

function showLog(instance_id: number, workflow_instance_id: number) {
  operatorTitle.value = '算子日志'
  store.instance_id = workflow_instance_id
  store.operator_id = instance_id
  operatorInit()
  operatorState.value = true
  operatorLogState.value = true
  operatorLogRef.value.init('success')
}
function runResult(resultStr: string, status: string) {
  operatorTitle.value = '算子运行结果'
  operatorInit()
  operatorState.value = true
  operatorResultState.value = true
  let obj = {
    resultStr: resultStr,
    status: status
  }
  operationResultRef.value.init(obj)
}
function operatorInit() {
  operatorResultState.value = false
  operatorLogState.value = false
}


onUnmounted(() => {
  store.LEFT_TABS_STATE(true)
  store.EXOERIMENTS_ID({})
})

</script>

<style scoped lang="scss">
@import "src/css/designerStyles/index.scss";

#iframe {
  height: calc(100vh - 260px);
}

.popupBox {
  position: fixed;
  opacity: 0;
  height: 0;
}

.showLog {
  position: fixed;
  opacity: 1;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.logContent {
  height: 70vh;
  width: 70vw;
  padding: 10px;
  background: white;
  position: relative;
  border-radius: 3px;

  .row {
    margin-bottom: 6px;
    border-bottom: 1px solid #efefef;

    .title {
      font-size: 18px;
      color: #333;
    }

    .colseBtn {
      font-size: 18px;
      cursor: pointer;
    }
  }

  .logBox {
    width: 100%;
    height: calc(70vh - 50px);
    overflow-y: auto;
    word-break: break-word;
  }
}

.refreshBtn {
  position: absolute;
  right: 20px;
  top: 70px;
  z-index: 99;
}
</style>
